/* 响应式布局容器 */
.main-layout {
  height: calc(100vh - 185px);
  flex-wrap: wrap;
}

/* 通用卡片样式 */
.el-card {
  margin-top: 10px;
  // border-radius: 8px;
  // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  :deep(.el-card__header) {
    padding: 12px 20px;
    background: #f8f9fa;
  }
}

/* 左侧区域样式 */
.left-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 16px;
  height: 100%;

  @media (max-width: 768px) {
    padding-right: 0;
  }
}

/* 右侧区域样式 */
.right-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;

  @media (max-width: 768px) {
    margin-top: 16px;
  }
}

/* 表格响应式 */
.responsive-table {
  :deep(th) {
    background: #f8f9fa !important;
    color: #606266;
    font-weight: 600;
  }

  :deep(td) {
    color: #606266;
  }
}

/* 通讯录表格 */
.contact-table {
  height: 40vh;

  :deep(.cell) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* 模块标题样式 */
.section-title {
  display: flex;
  align-items: center;
  font-weight: 600;
  color: #303133;

  img {
    width: 20px;
    height: 20px;
    margin-right: 8px;
  }
}

// 代办文字
.custom-tab-text {
  transition: color 0.3s ease;
  font-size: 16px;
  color: #9aa2b1;
}

// 代办tabs
.nav-tabs {
  display: flex;
  padding: 0px;
}

// 代办tabs组件线隐藏
:deep(.el-tabs__nav-wrap:after) {
  background-color: var(--el-border-color-light);
  bottom: 10px !important;
  content: none !important;
  height: 0px !important;
  // left: 0;
  // position: absolute;
  // width: 100%;
  // z-index: var(--el-index-normal);
}

// 代办tabs组件当前tab下线隐藏
:deep(.el-tabs__active-bar) {
  height: 0px !important;
}

.el-tabs.el-tabs--top {
  padding-top: 0px !important;
}

// 图标文字
.custom-tabs-label {
  display: flex;
  align-items: center;
  // padding: 10px 0px;
  cursor: pointer;
  transition: color 0.3s;
}

.custom-tabs-label img {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  font-size: 16px;
}

// 快捷入口按钮
.entry-buttons {
  .entry-btn {
    width: 100%;
    height: 47px;
    margin: 4px 0;
    border: 1px solid #ebeef5;
    border-radius: 6px;
    transition: all 0.3s;

    border-radius: 8px;
    background: var(--Primary4-50, #F1F2F4);

    &:hover {
      background: #f5f7fa;
      transform: translateY(-2px);
    }
  }
}

// 规章制度列表
.regulation-list {
  padding: 0;
  margin: 0;

  li {
    display: flex;
    padding: 8px 0;
    border-bottom: 1px solid #f0f2f5;

    .date {
      color: #909399;
      min-width: 60px;
      margin-right: 12px;
    }

    .content {
      color: #606266;
    }
  }
}

// 通讯录喝我的提醒自适应
.reminder-card,
.auto-card-left {
  flex: 1;
}

/* 提醒列表 */
.reminder-list {
  padding: 0;

  .reminder-item {
    display: flex;
    align-items: center;
    padding: 8px 0;

    .dot {
      color: #f56c6c;
      margin-right: 8px;
    }

    .text {
      color: #606266;
      margin: 0;
      font-size: 14px;
    }

    .date {
      color: #909399;
      font-size: 12px;
      margin-top: 2px;
    }
  }
}

/* 头部样式 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  flex-shrink: 0;
}

.search-input {
  height: 36px;
  border-radius: 100px;
}

/* 响应式媒体查询 */
@media (max-width: 1200px) {
  .main-layout {
    height: auto;
    flex-direction: column;
  }

  .left-col,
  .right-col {
    width: 100% !important;
    max-width: 100%;
  }

  .el-col-md-16,
  .el-col-md-8 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .card-header {
    display: flex;
    // flex-direction: column;
    align-items: flex-start;
  }

  .search-input {
    width: 30%;
    height: 36px;
    border-radius: 100px;
  }

  .left-col {
    padding-right: 0px;
  }
}

@media (max-width: 768px) {
  .entry-buttons .el-col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  .regulation-list li {
    flex-direction: column;

    .date {
      margin-bottom: 4px;
    }
  }

  .entry-btn {
    height: 42px;
    font-size: 13px;
  }
}

/* 按钮容器 */
.entry-buttons {
  margin: -5px;
  /* 抵消gutter产生的额外间距 */

  /* 列间距统一处理 */
  [class*="el-col"] {
    padding: 5px;
    /* 与gutter值匹配 */
  }
}

// 我的提醒
.header-with-more {
  display: flex;
  justify-content: space-between;
}

.custom-list-item {
  list-style: none;
  position: relative;
  padding-left: 20px;
}

.custom-list-item::before {
  content: "●";
  color: #f56c6c;
  /* 可修改为任意颜色 */
  font-size: 12px;
  position: absolute;
  left: 0;
  top: 10px;
  /* 添加动画效果 */
  transition: transform 0.3s ease;
}

.custom-list-item:hover::before {
  transform: scale(1.2);
}

/* 彻底无边框 */
.el-card {
  border: none !important;
  /* 移除边框 */
  box-shadow: none !important;
  /* 确保阴影完全关闭（双重保险） */
}

/* 如果存在内部伪元素边框（某些版本可能有） */
.el-card::before {
  display: none !important;
}

// 

/* 单元格高度 */
.el-table td {
  height: 10px !important;
  /* 调整行高 */
  padding: 8px 0 !important;
  /* 调整单元格内边距 */
}

/* 表头统一左对齐（覆盖默认样式） */
.el-table .cell {
  text-align: left !important;
  padding-left: 10px !important;
  /* 增加左间距 */
}

/* 调整操作按钮列的样式（可选） */
.el-table__body .el-button--text {
  color: #409eff !important;
  /* 按钮文字颜色 */
  padding: 0 5px !important;
}


.el-table .el-table__header-wrapper th {
  background: #fff !important;
  height: 48px !important;
  /* 调整表头高度 */
  color: var(--Primary4-500, #6F7B90) !important;
  font-family: "Source Han Sans CN" !important;
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: normal !important;
}

:deep(.el-table__row) {
  height: 60px;

  color: var(--Primary4-800, #383D48);
  font-family: "Source Han Sans CN";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  border-bottom: 1px solid #F0F2F2 !important;
  background: rgba(255, 255, 255, 0.10) !important;
}

/* 去除所有默认边框 */
.el-table--border,
.el-table--group {
  border: none !important;
}

/* 表头上下无边框 */
.custom-red-header th {
  border-top: none !important;
  border-bottom: none !important;
}



.el-table--border .el-table__inner-wrapper:after,
.el-table--border:after,
.el-table--border:before,
.el-table__inner-wrapper:before {
  background-color: #fff !important;

}

.el-table__body tr td {

  border-bottom: 1px solid #F0F2F2 !important;
  background: rgba(255, 255, 255, 0.10) !important;
}

.el-tabs__content {
  height: calc(100% - 40px);
  padding-top: 20px !important;
}

.el-input__wrapper {
  border-radius: 20px !important;
}

.search-input ::v-deep(.el-input__inner::placeholder) {

  opacity: 1 !important;
  /* 确保颜色不透明 */

  color: var(--Primary4-200, #B7BDC7);
  text-align: justify;
  font-family: "Source Han Sans CN";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}


/* 兼容不同浏览器 */
.search-input ::v-deep(.el-input__inner::-webkit-input-placeholder) {

  color: var(--Primary4-200, #B7BDC7);
  text-align: justify;
  font-family: "Source Han Sans CN";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;

}

.search-input ::v-deep(.el-input__inner::-moz-placeholder) {
  color: var(--Primary4-200, #B7BDC7);
  text-align: justify;
  font-family: "Source Han Sans CN";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.search-input ::v-deep(.el-input__inner:-ms-input-placeholder) {
  color: var(--Primary4-200, #B7BDC7);
  text-align: justify;
  font-family: "Source Han Sans CN";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}